<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>青瓜传媒</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div id="logo">
        <div class="logo-wrap">
            <div class="logo-left">
                <img src="./images/300-97-2.png" alt="">
            </div>
            <div class="logo-mid">
                <ul class="oUl">
                    <li class="oLi"><a href="#">首页</a></li>
                    <li class="oLi">
                        <a href="#">推广</a>&nbsp;
                        <img src="./images/xiajiantou_03.jpg" alt="">
                        <ul class="ul1">
                            <li><a href="">APP推广</a></li>
                            <li><a href="">游戏推广</a></li>
                            <li><a href="">海外推广</a></li>
                            <li><a href="">微信推广</a></li>
                            <li><a href="">抖音推广</a></li>
                            <li><a href="">快手推广</a></li>
                            <li><a href="">B站推广</a></li>
                            <li><a href="">小红书推广</a></li>
                        </ul>
                    </li>
                    <li class="oLi">
                        <a href="#">运营</a>&nbsp;
                        <img src="./images/xiajiantou_03.jpg" alt="">
                        <ul class="ul1">
                            <li><a href="">活动运营</a></li>
                            <li><a href="">用户运营</a></li>
                            <li><a href="">微信运营</a></li>
                            <li><a href="">抖音运营</a></li>
                            <li><a href="">快手运营</a></li>
                            <li><a href="">微博运营</a></li>
                            <li><a href="">B站运营</a></li>
                            <li><a href="">小红书运营</a></li>
                        </ul>
                    </li>
                    <li class="oLi">
                        <a href="#">营销</a>&nbsp;
                        <img src="./images/xiajiantou_03.jpg" alt="">
                        <ul class="ul1">
                            <li><a href="">活动策划</a></li>
                            <li><a href="">案例分析</a></li>
                            <li><a href="">数据研究</a></li>
                            <li><a href="">短视频</a></li>
                            <li><a href="">新媒体</a></li>
                            <li><a href="">文案圈</a></li>
                        </ul>
                    </li>
                    <li class="oLi">
                        <a href="#">青瓜早报</a>&nbsp;
                        <img src="./images/xiajiantou_03.jpg" alt="">
                        <ul class="ul1">
                            <li><a href="">青瓜专题</a></li>
                            <li><a href="">青瓜导航</a></li>
                            <li><a href="">互联网</a></li>
                        </ul>

                    </li>
                    <!-- <li class="oLi"><a href="#">读好书</a></li> -->
                    <li class="oLi">
                        <a href="#">推广服务</a>&nbsp;
                        <img src="./images/xiajiantou_03.jpg" alt="">
                        <ul class="ul1">
                            <li><a href="">广告资源</a></li>
                            <li><a href="">客户案例</a></li>
                        </ul>
                    </li>
                    <li class="oLi">
                        <a href="#">联系我们</a>&nbsp;
                        <img src="./images/xiajiantou_03.jpg" alt="">
                        <ul class="ul1">
                            <li><a href="">投稿须知</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="logo-right">
                <input type="button" class="btn">
                <button class="btn01">登录</button>
                <button class="btn01">注册</button>
                <span>投稿</span>
            </div>
        </div>
    </div>
    <div id="main">
        <div class="main-wrap">
            <div class="main-left">
                <div class="banner">

                    <!-- 轮播图 -->
                    <div id="boxx" class="banner-left">
                        <div>
                            <img src="./img/lb01.jpg" alt="">
                            <img src="./img/lb02.jpg" alt="">
                        </div>
                       
                        <ul>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                        <span >
                            《
                        </span>
                        <span>
                            》
                        </span>
                    </div>
                    <!-- 轮播图 -->

                    <div class="banner-right" id="br">
                        <!-- <li class="list1">
                           <img src="./images/case.jpg" alt="">
                           <span class="oSpan1">
                               高点击率文案拟写文案技巧
                           </span>
                       </li> -->
                    </div>
                </div>

                <!-- 下边内容 -->
                <div class="con">
                    <div class="txt">
                        <h1>专题介绍</h1>
                        <p>全部专题</p>
                    </div>
                    <div class="img01" id="imglists">

                    </div>
                    <div class=tw></div>
                    <ul class="zx" id="zxx">


                    </ul>
                    <div class="down" id="down1">
                    </div>
                    <!-- <div class="down" id="down2">
                    </div>
                    <div class="down" id="down3">
                    </div> -->


                    <div class="dj">
                        <h1 id="ggl">点击查看更多</h1>
                    </div>
                </div>
                <!-- 底边内容 -->
                <div class="floor-wrap">
                    <div class="yq">
                        <h1>友情链接</h1>
                        <p>申请友链</p>
                    </div>
                    <div class="link" id="kkl">
                    </div>
                </div>
                <div class="dii">
                    <ul>
                        <li><a href="#">首页</a></li>
                        <li><a href="#">推广</a></li>
                        <li><a href="#">运营</a></li>
                        <li><a href="#">营销</a></li>
                        <li><a href="#">数据</a></li>
                        <li><a href="#">读好书</a></li>
                        <li><a href="#">互联网</a></li>
                        <li><a href="#">服务</a></li>
                    </ul>
                    <p>Copyright &copy 2014-2019 青瓜传媒 版权所有 免责声明 <em>联系我们</em> 闽ICP备100448号1</p>
                    <img src="./images/ddd_03.jpg" alt="">
                </div>
            </div>
            <!-- 右边 -->
            <div class="main-right">
                <div class="title" id="ttl">
                    <li class="rm">
                        <span></span>
                        <h1>热门文章</h1>
                    </li>
                    <!-- <div class="art"> 
                        <div class="ww">
                            <img src="img/article01_01.jpg" alt="">
                        </div>
                        <div class="ru">
                            <p>移动互联网2017年Q2夏季报告：移动生态流量...</p>
                            <em>2017年7月12日</em> 
                        </div> 
                    </div> -->

                </div>
                <div class="php">
                    <img src="./images/yidong.png" alt="">
                </div>
                <div class="tui">
                    <div class="title" id="jian">
                        <li class="rm">
                            <span></span>
                            <h1>推荐文章</h1>
                        </li>
                    </div>
                </div>
                <div class="php">
                    <img src="./img/xiaomao2.png" alt="">
                </div>
                <div class="jd">
                    <div class="title" id="jjd">
                        <li class="rm">
                            <span></span>
                            <h1>经典文章</h1>
                        </li>
                    </div>
                </div>
                <div class="bq">
                    <div class="title">
                        <li class="rm">
                            <span></span>
                            <h1>热门标签</h1>
                        </li>
                    </div>
                    <div class="bbq" id="qqb">

                    </div>
                </div>
                <div class="php">
                    <img src="./images/yidong.png" alt="">
                </div>
            </div>

        </div>

</body>

</html>
<script src="./js/data.js"></script>
<script src="./js/index.js"></script>
<script src="js/move2001.js"></script>
<script src="js/Slider.js"></script>

<script>
    ggl.onclick = function () {
        for (var i = 0; i < artile.length - 14; i++) {
            down1.innerHTML += `
    <div class="active">
                        <li class="lii">
                            <h1><img class="ppi" src="./${artile[i].imgurl}" alt=""></h1>
                            <h3>${artile[i].hx}</h3>
                        </li>
                        <li class="lli">
                            <h2>${artile[i].title}</h2>
                            <p>
                                ${artile[i].contents}
                            </p>
                            <dl>
                            <dd> ${artile[i].times}</dd>
                            <dd class="yj">
                                <img src="./${artile[i].imgurls}" alt="">
                                <em>${artile[i].read}</em>
                            </dd>
                            </dl>
                        </li>
                   </div>
    `
        }
    }


    var tabb = document.getElementById("zxx")
    var uuu = document.getElementsByClassName('down')
    var liste = tabb.children
    console.log(uuu);

    for (var i = 0; i < liste.length; i++) {
        liste[i].index = i
        if (i % 2 == 0) {
            liste[i].onclick = function () {
                console.log(liste.length);
                for (var j = 0; j < liste.length; j++) {
                    liste[j].style.cssText = `
            color:#666666;
            border:none         `

                }
                this.style.cssText = `
        color:#1abca5;
        border-bottom: 1px solid #1abca5;
        `
            }
        }
    }
    //轮播图:

    window.onload = function () {
        let oBox = document.getElementById("boxx");
        new Slider(oBox, {
            douBoxColor: "white",
            douWidth: 12,
            douHeight: 12,
            douColor: "skyblue",
            douHighColor: "blue",
            douIsCircle: false,
            timeLong: 3000,
            hrefs: ["https://www.baidu.com", "http://www.1000phone.com", "http://www.qq.com", "http://www.jd.com", "http://www.mobiletrain.com"]
        });
        
        let oBox2 = document.getElementById("box2");
        new Slider(oBox2, {          
            hrefs: [ "http://www.qq.com", "http://www.jd.com", "http://www.mobiletrain.com"]
        });
        
    
    }


</script>